/**
 * Created by Sever on 2016/9/27.
 */
var utils = require('utils');

const app = new Vue({
    //路由
    // router: router,
    //要挂载的dom元素
    el:'#app',
    //模板
    template:'',
    //数据
    data:{
        json_data:{},
    },
    beforeCreate: function () {
        utils.adaptive();
        console.log("生命周期-创建event实例前");



    },
    mounted: function () {
        var _this = this;
        console.log("生命周期-挂载到#app后");


        _this.json_data = {
            list:[{
                id:'video-1',
                source_src:'http://vjs.zencdn.net/v/oceans.mp4',
                poster:'http://vjs.zencdn.net/v/oceans.png',//预览图
                type:'video/mp4',
            },
            //     {
            //     id:'video-2',
            //     source_src:'http://jq22.qiniudn.com/www.jq22.commi4.webm',
            //     poster:'',//预览图
            //     type:'video/webm',
            // },
            ],
        }

    },
    updated:function(){
        console.log("生命周期-更新数据后");
        var _this = this;

        for(var i=0; i<_this.json_data.list.length; i++){
            var item = _this.json_data.list[i];
            _this.video_init('#'+item.id);
        }

    },
    //各种方法
    methods: {
        //视频播放
        /*初始化*/
        video_init:function(selector){
            var _this = this;
            var $item = $(selector);
            var d_video = $item.find('video')[0];//获取dom元素
            if(!d_video) return;

            _this.video_dragbtn(selector);

            var i = setInterval(function() {
                /*
                 readyState
                 0 = HAVE_NOTHING - 没有关于音频/视频是否就绪的信息
                 1 = HAVE_METADATA - 关于音频/视频就绪的元数据
                 2 = HAVE_CURRENT_DATA - 关于当前播放位置的数据是可用的，但没有足够的数据来播放下一帧/毫秒
                 3 = HAVE_FUTURE_DATA - 当前及至少下一帧的数据是可用的
                 4 = HAVE_ENOUGH_DATA - 可用数据足以开始播放
                */
                if(d_video.readyState) {
                    var duration    = utils.formatTime_zero(d_video.duration*1000);
                    var durationStr = (duration.h!='00'?(duration.h+':'):'')+duration.mi+':'+duration.s;

                    //播放时间
                    var $time = $item.find('.video-progress-time');
                    $time.html('00:00/' + durationStr);

                    //音量
                    var $volume = $item.find('.volume');
                    $volume.val(d_video.volume*100);

                    //是否静音
                    d_video.muted = false;

                    clearInterval(i);
                }
            }, 200);
        },
        /*加载*/
        video_load:function(selector){
            var $item = $(selector);
            var d_video = $item.find('video')[0];//获取dom元素
            d_video.load();
            var _this = this;
            _this.video_init(selector);
        },
        /*播放*/
        video_play:function(selector){
            var _this = this;
            var $item = $(selector);
            var d_video = $item.find('video')[0];//获取dom元素
            var $time = $item.find('.video-progress-time');//播放时间
            $item.find(".control-play").hide();
            $item.find(".control-pause").show();
            $item.find(".screen-video-controls").css("opacity",0);
            d_video.play();

            //进度
            var progressInte = setInterval(function(){
                var percent = d_video.currentTime / d_video.duration; //播放百分比
                var currentTime = utils.formatTime_zero(d_video.currentTime*1000);
                var currentTimeStr = (currentTime.h!='00'?(currentTime.h+':'):'')+currentTime.mi+':'+currentTime.s;
                var duration    = utils.formatTime_zero(d_video.duration*1000);
                var durationStr = (duration.h!='00'?(duration.h+':'):'')+duration.mi+':'+duration.s;

                //进度条
                var total_bar_w = $item.find(".video-progress-bar .total").width();
                var cur_bar_w = total_bar_w*percent;
                $item.find(".video-progress-bar .current").width(cur_bar_w);

                $item.find(".video-progress-bar .slide-btn").css("left",cur_bar_w);

                $time.html(currentTimeStr + '/' + durationStr);

                if(percent==1 || d_video.paused){
                    clearInterval(progressInte);
                    _this.video_pause(selector);
                }
                // console.log(utils.formatTime_zero(d_video.currentTime*1000));
            }, 10);

            var i_buffer = setInterval(function() {
                $item.find(".video-progress-bar .buffer").remove();
                var $progress_bar = $item.find(".video-progress-bar");
                var duration = d_video.duration;
                var buffer_total = 0;//缓冲总数

                //多个缓冲
                for(var i=0; i<d_video.buffered.length; i++){
                    var buffed_start = d_video.buffered.start(i);
                    var buffed_end = d_video.buffered.end(i);

                    buffer_total += (buffed_end-buffed_start);

                    var el_buffer = $("<div class='buffer'></div>");
                    el_buffer.css("left",(buffed_start*100/duration) + "%");
                    el_buffer.css("width",((buffed_end-buffed_start)*100/duration) + "%");
                    // console.log((buffed_start/duration) + "%");
                    // console.log(((buffed_end-buffed_start)/duration) + "%");
                    $progress_bar.append(el_buffer);

                    // console.log(buffed_start + "~" + buffed_end + "|" + d_video.duration);
                }

                // console.log(buffer_total*100/duration + "%" );

                if(buffer_total==duration || d_video.ended ){
                    clearInterval(i_buffer);
                }

            },200);
        },
        /*暂停*/
        video_pause:function(selector){
            var _this = this;
            var $item = $(selector);
            var d_video = $item.find('video')[0];//获取dom元素
            d_video.pause();
            $item.find(".control-play").show();
            $item.find(".control-pause").hide();
            $item.find(".screen-video-controls").css("opacity",0.8);
        },
        /*拖动进度条*/
        video_dragbtn:function(selector){
            var _this = this;
            var $item = $(selector);
            var d_video = $item.find('video')[0];//获取dom元素

            var isDrap = false;


            /*$item.find(".video-progress-bar").mousedown(function () {
                _this.video_pause(selector);
                jump($(this));
                isDrap = true;

            });*/
            $item.find(".video-progress-bar").bind("touchstart",function () {
                _this.video_pause(selector);
                jump($(this));
                isDrap = true;

            });

            /*$item.mousemove(function(){
                if(isDrap){
                    jump($(this));
                }
            });*/
            $item.bind("touchmove",function(){
                if(isDrap){
                    jump($(this));
                }
            });

            /*$item.find(".video-progress-bar").mouseup(function(){
                _this.video_play(selector);
                isDrap = false;
            });*/
            $item.find(".video-progress-bar").bind("touchend",function(){
                _this.video_play(selector);
                isDrap = false;
            });


            function jump(el){
                //进度条位置
                var total_left  = $item.find(".video-progress-bar .total").offset().left;
                var total_bar_w = $item.find(".video-progress-bar .total").width();
                //鼠标相对屏幕位置
                var sx = event.screenX || event.touches[0].clientX;
                //鼠标相对元素位置
                // var el_left = el.find(".slide-btn").offset().left;
                // var pl = sx-el_left;

                var left = sx-total_left<0?0:sx-total_left;
                left = left>total_bar_w?total_bar_w:left;
                el.find(".slide-btn").css("left",left);
                el.find(".current").width(left);

                var percent = left/total_bar_w;

                d_video.currentTime = d_video.duration*percent;

                var $time = $item.find('.video-progress-time');//播放时间
                var duration    = utils.formatTime_zero(d_video.duration*1000);
                var durationStr = (duration.h!='00'?(duration.h+':'):'')+duration.mi+':'+duration.s;
                var currentTime = utils.formatTime_zero(d_video.currentTime*1000);
                var currentTimeStr = (currentTime.h!='00'?(currentTime.h+':'):'')+currentTime.mi+':'+currentTime.s;
                $time.html(currentTimeStr + ' / ' + durationStr);
            }
        },
        //设置音量
        video_setVolume:function(selector,event,percent){
            var _this = this;
            var $item = $(selector);
            var $volume_control = $item.find(".volume-control");
            var d_video = $item.find('video')[0];//获取dom元素

            // console.log(percent);
            if(!percent){
                percent = event.target.value/100;
            }


            d_video.volume = percent;

            if(percent>0.5){
                $volume_control.removeClass('icon-yinliang001').removeClass('icon-yinliang101').addClass   ('icon-yinliang201');
                _this.video_muted(selector,false);
            }else if(percent>0){
                $volume_control.removeClass('icon-yinliang001').addClass   ('icon-yinliang101').removeClass('icon-yinliang201');
                _this.video_muted(selector,false);
            }else if(percent==0){
                $volume_control.addClass   ('icon-yinliang001').removeClass('icon-yinliang101').removeClass('icon-yinliang201');
                _this.video_muted(selector,true);
            }


        },
        //静音(选择器,是否静音)
        video_muted:function(selector,isMuted){


            var _this = this;
            var $item = $(selector);
            var d_video = $item.find('video')[0];//获取dom元素
            var $volume_control = $item.find(".volume-control");
            var $volume_progress_input = $item.find(".volume-progress input");

            if(isMuted != undefined){
                d_video.muted = !isMuted;
            }

            if(!d_video.muted){
                d_video.muted = true;
                $volume_control.addClass   ('icon-yinliang001').removeClass('icon-yinliang101').removeClass('icon-yinliang201');
            }else{
                d_video.muted = false;
                if(d_video.volume==0){
                    d_video.volume = 0.6;
                }

                if(d_video.volume>0.5){
                    $volume_control.removeClass('icon-yinliang001').removeClass('icon-yinliang101').addClass   ('icon-yinliang201');
                }else{
                    $volume_control.removeClass('icon-yinliang001').addClass   ('icon-yinliang101').removeClass('icon-yinliang201');
                }
            }
            $volume_progress_input.val(d_video.volume*100);

        },
        video_launchFullScreen : function(selector) {
            var _this = this;
            var $item = $(selector);
            var d_video = $item.find('video')[0];//获取dom元素
            if(d_video.requestFullScreen) {
                d_video.requestFullScreen();
            } else if(d_video.mozRequestFullScreen) {
                d_video.mozRequestFullScreen();
            } else if(d_video.webkitRequestFullScreen) {
                d_video.webkitRequestFullScreen();
            }
        }
    }
});
